<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
<!--    <link rel="stylesheet" href="../../css/public.css">-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-repeat: no-repeat;
            background-image: url("images/bg.jpg");
            background-size: 1800px;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body>


<!--    <fieldset class="table-search-fieldset">-->
<!--    <legend>搜索信息</legend>-->
<!--    <div style="margin: 10px 10px 10px 10px">-->
<!--        <form class="layui-form layui-form-pane" action="">-->
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">日期：</label>-->
<!--                    <div class="layui-inline layui-input-inline">-->
<!--                        <input type="text" name="date" class="layui-input" id="test1">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">工号：</label>-->
<!--                    <div class="layui-inline layui-input-inline">-->
<!--                        <input  type="text" name="id" autocomplete="off" class="layui-input" id="demoReload">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">员工姓名：</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="text" name="username" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;                <div class="layui-inline">&ndash;&gt;-->
<!--                &lt;!&ndash;                    <label class="layui-form-label">职位：</label>&ndash;&gt;-->
<!--                &lt;!&ndash;                    <div class="layui-input-inline">&ndash;&gt;-->
<!--                &lt;!&ndash;                        <input type="text" name="position" autocomplete="off" class="layui-input">&ndash;&gt;-->
<!--                &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                </div>&ndash;&gt;-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">部门：</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="text" name="department" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <button class="layui-btn" id="searchBtn">搜 索</button>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
<!--</fieldset>-->

    <table id="demo" lay-filter="test"></table>






<script src="../../lib/layui-v2.6.3/layui.js"></script>

 <script type="text/html" id="toolbarDemo">
     <div class="layui-btn-container">
<!--         <button class="layui-btn layui-btn-sm" lay-event="getCheckData">员工信息</button>-->
         <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">选中的员工数目</button>
         <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
     </div>
 </script>
 <script type="text/html" id="barDemo">
     <a class="layui-btn  layui-btn-xs " lay-event="edit">修改员工电话</a>
     <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="del">删除</a>
 </script>
 <script>
     // 时间选框
     layui.use('laydate', function(){
        // console.log($("#test1").eq(0).val());
         var laydate = layui.laydate;
         laydate.render({
             elem: '#test1'
         });
     });

     //json的引入和表格内的操作
     layui.use("table",function () {
         let table=layui.table;
         let $=layui.jquery;
         table.render({
             elem:"#demo",//绑定id
             url:"json/ttable.json",//数据接口

             cols:[[
                 {field: 'd', type:'checkbox' ,align: "center"},
                 {field: 'd',title: '序号',type:'numbers',align: "center" },
                 {field: 'id', title: '工号', width: 90,sort: true,align: "center"},
                 {field: 'username', title: '姓名', width: 110,sort: true,align: "center"},
                 {field: 'sex', title: '性别', width: 80,align: "center",align: "center"},
                 {field: 'number', title: '身份证号码', width: 200,align: "center"},
                 {field: 'department', title: '部门', width: 100,align: "center"},
                 {field: 'position', title: '职位', width: 100,align: "center"},
                 {field: 'address', title: '地点', width: 170,align: "center"},
                 {field: 'tel', title: '电话', width: 170,edit:'test',align: "center"},
                 {field: 'Admission', title: '入园时间', width: 130,sort: true,align: "center"},
                 {field: 'leave', title: '离园时间', width: 130,sort: true,align: "center"},
                 {field: 'date', title: '日期', width: 120,align: "center"},
                 {title: '操作', minWidth: 150, toolbar: '#barDemo', align: "center"}
             ]],
             page:true,
             //
             toolbar:"#toolbarDemo"
         });
         table.on('toolbar(test)',function (obj) {
             // console.log(obj);
             let checkStatus=table.checkStatus(obj.config.id);
             // console.log(checkStatus);
             let eventName=obj.event;
             switch (eventName) {
                case "getCheckData":
                    //获取被选中的记录的数组
                    var arr=checkStatus.data;
                    //将数组解析成字符串
                    layer.alert(JSON.stringify(arr));
                    break;
                 case "getCheckLength":
                     //获取被选中的记录的数组
                     var arr=checkStatus.data;3
                     //将数组解析成字符串
                     layer.msg("选中了"+arr.length+"员工！");
                     break;
                 case "isAll":
                     //通过isall属性判断是否全选
                     var flag=checkStatus.isAll;
                     var str=flag?'全选':'未全选'
                     layer.msg(str);
                     break;
                default:
                     break;
             }
         })
        //监听行工具栏事件
         table.on('tool(test)',function (obj){
             var tr=obj.data;
             //得到事件
             var eventName=obj.event;
             if (eventName=='del'){
                 layer.confirm("您确认删除吗",function(index){
                     obj.del();
                     layer.close(index);
                 })
             }else if (eventName=='edit'){
                 layer.prompt({
                     formType:0,
                     value:tr.tel,

                 },function (value,index){
                     obj.update({
                         tel:value,
                     })
                     //关闭弹出层
                     layer.close(index)
                 });
                 // layer.prompt({
                 //     formType:0,
                 //     value:tr.sex,
                 //
                 // },function (value,index){
                 //     obj.update({
                 //         sex:value,
                 //     })
                 //     //关闭弹出层
                 //     layer.close(index)
                 // });
             }
         });
         table.on('edit()test',function (obj) {
             console.log(obj);
             var value=obj.value;
             var data=obj.data;
             var field=obj.field;
             layer.msg("【ID："+data.id+"】的"+field+"字段修改为："+value);
         })
        $(document).on('click','#searchBtn',function (data) {
            //获取搜索文本框内的值
            var sreach=$("#demoReload");
            table.reload('demo',{
                where:{
                    id:sreach.val(),
                    name:"zhangsan"
                },
                page:{
                    curr:1
                }
            })
        })
     })
 </script>
</body>
</html>